<template>
  <div>
    <div class="document f-a-c">
      <div class="ducumentBOX f-j-sb-a-c">
        <div
          class="item click"
          :class="current == index ? 'itemactiv' : ''"
          v-for="(item, index) in doucenmtnList"
          :key="index"
          @click="doucenmtnListClick(index)"
        >
          <span>{{ item.title }}</span>
        </div>
      </div>
    </div>
    <div class="document_box f-j-a-c">
      <img src="../../../assets/image/dbg.png" alt="" />

      <div class="shequn f-j-a-c" v-if="current == 0">
        <div class="left">
          <span>加入社群</span>
          <div class="leftitem f-a-c">
            <svg-icon name="icon-pengyou"></svg-icon>
            <span>和更多热爱设计的朋友们一起交流</span>
          </div>
          <div class="leftitem f-a-c">
            <svg-icon name="icon-guanzhu"></svg-icon>
            <span>关注我们，随时随地获得最新AIGC资讯和网站 最新更新提醒~</span>
          </div>
        </div>
        <div class="right right-join-shequ f-a-c">
          <div class="right f-d-c f-j-a-c">
            <span>Desai官方账号</span>
            <img src="../../../assets/image/gzh.png" alt="" />
            <span>微信公众号</span>
          </div>
          <div class="right f-d-c f-j-a-c">
            <span>Desai QQ社群</span>
            <img src="../../../assets/image/er.png" alt="" />
            <span>QQ群</span>
          </div>
        </div>
      </div>
      <div class="xinshou f-j-a-c" v-if="current == 1">
        <div class="xinshoubox f-a-c">
          <div
            class="xinshouleft"
            :style="{
              cursor: xinshou[xinshouCurrent].banners ? 'pointer' : '',
            }"
          >
            <img
              :src="xinshou[xinshouCurrent].banner"
              alt=""
              @click="qiehuan(xinshou[xinshouCurrent])"
            />
            <img
              @click="qiehuan(xinshou[xinshouCurrent])"
              class="banners"
              v-if="xinshou[xinshouCurrent].banners"
              :src="xinshou[xinshouCurrent].banners"
              alt=""
            />
          </div>
          <div
            class="xinshouright f-d-c"
            :class="xinshou[xinshouCurrent].banners ? 'bannerlset' : ''"
          >
            <img :src="xinshou[xinshouCurrent].num" alt="" />
            <div class="title">{{ xinshou[xinshouCurrent].title }}</div>
            <div class="content">{{ xinshou[xinshouCurrent].content }}</div>
          </div>
        </div>

        <svg-icon name="icon-zuohua" class="you click" @click="lunboClick(2)"></svg-icon>
        <svg-icon
          name="icon-youhua"
          class="zuo click"
          @click="lunboClick(1)"
          v-if="xinshouCurrent != 0"
        ></svg-icon>
      </div>
      <div class="shequn f-j-a-c" v-if="current == 2">
        <div class="left f-d-c">
          <span>联系我们</span>
          <div class="leftitem f-a-c">
            <span style="margin-left: 0"
              >团队来自阿里巴巴和UCL、TUD等欧美知名高校。任何关于DESAI的意见与建议，及相关合作事宜，欢迎联系我们：孙先生18500323458</span
            >
          </div>
        </div>
        <div class="right lianxibox f-d-c">
          <div class="lianxi f-d-c" v-for="(item, index) in lianxilist" :key="index">
            <span>{{ item.text }}</span>
            <div class="f-a-c lianxiitem">
              <span>{{ item.content }}</span>
              <span>{{ item.email }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="shequn f-j-a-c" v-if="current == 3">
        <div class="left f-d-c">
          <span>一次性捐助</span>
          <div class="leftitem f-a-c">
            <svg-icon name="iocn-liwu"></svg-icon>
            <span>可抢先体验新功能</span>
          </div>
        </div>
        <div class="right lianxibox f-d-c f-j-a-c">
          <img src="../../../assets/image/tu-zanzhu.png" alt="" />
          <div class="button click f-j-a-c" @click="zanzhu" v-if="!zanzhus">赞助</div>
          <img
            class="xuanzhu f-j-a-c"
            src="../../../assets/image/sss.png"
            v-else
            alt=""
          />

          <span class="juankan f-j-a-c"> 您的捐款记录 </span>
        </div>
      </div>
      <div class="shequn f-j-a-c" v-if="current == 4">
        <div class="left f-d-c">
          <span>API接口</span>
          <div class="leftitem f-a-c">
            <svg-icon name="icon-weixiao"></svg-icon>
            <span>暂未开放，敬请期待</span>
          </div>
        </div>
        <div class="right lianxibox f-d-c">
          <img src="../../../assets/image/tu-shijian.png" style="height: 135px" alt="" />
          <div class="button click f-j-a-c">接入网站</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { useRouter } from "vue-router";
import {
  computed,
  defineComponent,
  onMounted,
  reactive,
  toRefs,
  getCurrentInstance,
  onUnmounted,
} from "vue";
import { useStore } from "vuex";
export default defineComponent({
  setup() {
    const router = useRouter();
    const { proxy } = getCurrentInstance();
    let store = useStore();
    let data = reactive({
      xinshouCurrent: 0,
      xinshou: [
        {
          banner: new URL("../../../assets/image/xinshou-tu1.png", import.meta.url),
          title: "浏览搜索你喜欢的AIGC内容",
          content: "在DESAI探索设计类AIGC内容，包括模型和图片",
          num: new URL("../../../assets/image/01.png", import.meta.url),
        },
        {
          banner: new URL("../../../assets/image/xinshou-tu2.png", import.meta.url),
          title: "浏览并复制Prompt中英文指令词",
          content:
            "下载你喜欢的图片,查看Prompt指令词的中文翻译,和具体参数等,并一键复制指令词。",
          num: new URL("../../../assets/image/02.png", import.meta.url),
        },
        {
          banner: new URL("../../../assets/image/xinshou-tu3.png", import.meta.url),
          title: "浏览并下载AIGC设计类模型",
          content:
            "根据细分搜索,下载你喜欢的设计类AIGC模型,查看创作者说明,并一键下载至你的本地SD文件夹中,直接调用。",
          num: new URL("../../../assets/image/03.png", import.meta.url),
        },
        {
          banner: new URL("../../../assets/image/xinshou-tu5.png", import.meta.url),
          banners: new URL("../../../assets/image/xinshou-tu4.png", import.meta.url),
          title: "上传自己的AIGC创作,打造自己的创作者主页吧!",
          content:
            "上传你自己的AIGC图片或者模型,成为DESAI社区的创作者,获取更多的流量曝光和利润分成。打造自己的创作者主页,建立自己的收藏夹,让DESAI成为你创作路上的伙伴吧。",
          num: new URL("../../../assets/image/04.png", import.meta.url),
        },
      ],
      lianxilist: [
        {
          text: "商务及流量合作",
          content: "请发送邮件至",
          email: "idesai@163.com",
        },
        {
          text: "品牌广告投放",
          content: "请发送邮件至",
          email: "idesai@163.com",
        },
        {
          text: "反馈与建议",
          content: "请发送邮件至",
          email: "idesai@163.com",
        },
      ],
      current: 0,
      doucenmtnList: [
        {
          title: "加入社群",
        },
        {
          title: "新手入门",
        },
        {
          title: "商务合作",
        },
        {
          title: "赞助我们",
        },
        {
          title: "API接口",
        },
      ],
      zanzhus: false,
    });
    onMounted(() => {
      stopScrolling(false); //阻止页面滚动
      data.current = router.currentRoute._value.query.id - 1;
    });

    onUnmounted(() => {
      stopScrolling(true);
    });

    // 页面滚动开关
    let stopScrolling = (type) => {
      let overflowStyle = type ? "visible" : "hidden";
      document.body.style.overflow = overflowStyle;
      document.addEventListener("touchmove", data.m, { passive: type });
    };
    let doucenmtnListClick = (index) => {
      data.current = index;
    };
    let lunboClick = (index) => {
      if (index == 2) {
        //加
        if (data.xinshouCurrent == 3) {
          return;
        }
        data.xinshouCurrent++;
      } else {
        if (data.xinshouCurrent == 0) {
          return;
        }
        data.xinshouCurrent--;
      }
    };
    //切换
    let qiehuan = (item) => {
      if (item.banners) {
        let onebanner = item.banner;
        let twobanner = item.banners;
        item.banners = onebanner;
        item.banner = twobanner;
      }
    };
    //赞助
    let zanzhu = () => {
      data.zanzhus = true;
    };
    return {
      zanzhu,
      qiehuan,
      lunboClick,
      stopScrolling,
      doucenmtnListClick,
      ...toRefs(data),
    };
  },
});
</script>
<style lang="scss" scoped>
.document {
  position: relative;
  z-index: 1;
  background-color: #fff;
  border-bottom: 1px solid #ededed;
  padding-top: 30px;
  // margin-top: -40px;
  .ducumentBOX {
    position: relative;
    width: 642px;
    margin: 0 auto;
    .itemactiv {
      border-bottom: 4px solid #64c8dc;
      border-radius: 4px 4px 0px 0px;
    }
    .item {
      padding-bottom: 21px;

      cursor: pointer;
      > span {
        font-size: 14px;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: 700;
        color: #000000;
      }
    }
  }
}
.document_box {
  > img {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100vh;
  }
  .shequn {
    width: 1000px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    margin-top: 179px;

    .left {
      margin-right: 74px;
      > span {
        display: block;
        margin-bottom: 20px;
        font-size: 30px;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: 700;
        color: #000000;
      }
      .leftitem {
        margin-bottom: 20px;
        > span {
          display: block;
          width: 286px;
          margin-left: 10px;
          font-size: 14px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          color: #656f79;
        }
      }
    }
    .right {
      width: 315px;
      height: 315px;
      background: #ffffff;
      box-shadow: 0px 0px 10px 0px rgba(100, 200, 220, 0.4);
      border-radius: 40px 40px 40px 40px;
      > img {
        width: 200px;
        height: 200px;
      }
      > span {
        margin-bottom: 20px;
        font-size: 16px;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: 700;
        color: #000000;
        &:last-child {
          font-size: 14px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          color: #656f79;
        }
      }
    }

    .right-join-shequ {
      // width:490px;
      width: auto;
      padding: 10px 40px;
      > .right {
        box-shadow: none;
        width: 200px;
        > span {
          margin-bottom: 10px;
        }
      }
      > .right:first-child {
        // margin-right: 20px;
      }
    }

    .lianxibox {
      padding: 21px;
      > img {
        width: 260px;
        // height: 135px;
        margin-bottom: 18px;
      }
      .button {
        margin: 0 auto;
        width: 200px;
        height: 60px;
        background: linear-gradient(90deg, #9ed8e6 0%, #a1f0c0 100%);
        border-radius: 10px 10px 10px 10px;
        opacity: 1;
        font-size: 18px;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: 700;
        color: #ffffff;
      }
      .juankan {
        text-align: center;
        margin-top: 9px;

        font-size: 14px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #656f79;
      }
      .lianxi {
        margin-top: 30px;
        > span {
          font-size: 18px;
          font-family: Microsoft YaHei-Bold, Microsoft YaHei;
          font-weight: 700;
          color: #000000;
        }
        &:first-child {
          margin-top: 0;
        }
        .lianxiitem {
          margin-top: 10px;
          > span {
            font-size: 14px;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            color: #656f79;
            &:last-child {
              color: #ff2744;
            }
          }
        }
      }
    }
  }
}

.xinshou {
  position: relative;
  margin-top: 205px;
  width: 1000px;
  .xinshoubox {
    .xinshouleft {
      position: relative;
      > img {
        width: 700px;
        height: 392px;
      }
      .banners {
        position: absolute;
        top: 119px;
        left: 100px;
        width: 700px;
        height: 392px;
      }
    }
    .bannerlset {
      margin-left: 117px;
    }
    .xinshouright {
      width: 100%;
      > img {
        margin-bottom: -20px;
        width: 74px;
        height: 79px;
      }
      .title {
        width: 376px;
        display: block;
        // white-space: nowrap;
        font-size: 30px;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: 700;
        color: #000000;
      }
      .content {
        margin-top: 20px;
        font-size: 14px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #656f79;
      }
    }
  }

  .zuo {
    position: absolute;
    left: -25%;
    top: 50%;
    width: 40px;
    height: 40px;
    transform: translateY(-50%);
  }
  .you {
    position: absolute;
    right: -25%;
    top: 50%;
    width: 40px;
    height: 40px;
    transform: translateY(-50%);
  }
}
.xuanzhu {
  margin: 0 auto;
  width: 100px !important;
  height: 100px !important;
  margin-bottom: 0 !important;
}
</style>
